<script setup lang="ts">
import { useQuestionStore } from '@/stores/questions'
import router from '@/router'
import { toRefs } from 'vue'

const { currentQuestionId, incrementQuestionId } = toRefs(useQuestionStore())

const nextQuestion = () => {
  incrementQuestionId.value()
  router.push(`/question/reply/${currentQuestionId.value}`)
}
</script>

<template>
  <div>
    <div class="user-container">
      <div class="user-info">
        <div class="user-info-main">
          <router-view />
        </div>
      </div>
      <div class="user-lines"></div>
      <div>
        <van-button class="next" type="primary" size="large" plain @click="nextQuestion"
          >下一题
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-container {
  width: 100%;
  height: 100%;
  padding-top: 14rem;
  text-align: center;

  // 用户信息部分
  .user-info {
    margin: 0 auto;
    width: 85%;
    border-radius: 7px;
    box-shadow: #c6ecda 12px 2px 23px 5px;
    background-color: #fff;

    // 用户信息主体
    .user-info-main {
      width: 85%;
      height: 100%;
      margin: 0 auto;
    }
  }

  // 底部分割线
  .user-lines {
    margin: 0 auto;
    width: 78%;
    background-color: #07ceb4;
    height: 0.3rem;
    border-radius: 2px 2px 10px 10px;
  }

  // 下一题按钮
  .next {
    width: 85%;
    margin: 1rem auto;
    background-color: #07ceb4;
    border-radius: 30px;
    color: #fff;
  }
}
</style>
